<template>
	<view class="card-detail">
		
		<!-- <u-tabs :list="list6"  @click="click"></u-tabs> -->
		<u-cell-group >
			<u-cell v-for="item in recordList" :key="item.id" :index="item.id">
				<view slot="title" >
					<view class="name" style="color: #ff0000">{{item.act_name}}</view>
					<view class="date">{{ item.create_at }}</view>
				</view>
				<view slot="value" class="text-right" >
					<view class="number" style="color: #ff0000"><text>-</text> {{ item.points }}</view>
					<view class="rest" >剩余积分:{{ item.else_points }}</view>
				</view>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	const market = require("@/api/market/index.js");
	export default {
		data() {
			return {
				// list6: [{
				// 	name: '积分抽奖'
				// }, {
				// 	name: '活动抽奖',
				// }],
				xiaofei: false,
				recordList:[],
				card_id:'',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
			}
		},
		onLoad(options) {
			this.getLotteryRecord()
		},
		methods: {
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},

			// click(item) {
			// 	console.log(item,'2222')
			// 	if (item.index == 0) {
			// 		this.xiaofei = false
			// 	} else if (item.index == 1) {
			// 		this.card_id = 478
			// 		this.getMoneyRecord(this.card_id)
			// 		this.xiaofei = true
			// 	}
			// },

			
			// 获取卡消费记录
			async getLotteryRecord(card_id) {
				let that = this;
				if (this.listQuery.pageNo === 1) that.recordList = [];
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let res = await market.getLotteryRecord(params)
				if (res.code === 1) {
					console.log(res,'1231')
					that.recordList = that.recordList.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getLotteryRecord()
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
		}

		.vueBgdCol {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: 0.8;
			filter: alpha(opacity=88);
		}

		.vueContant {
			position: fixed;
			top: 40%;
			left: 50%;
			width: 600rpx;
			height: 600rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}

		.vueTitle {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 22rpx;
			font-weight: 600;
		}
		
		.vueContants {
			position: fixed;
			top: 40%;
			left: 50%;
			width: 600rpx;
			height: 330rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}
		.vueTits{
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 75rpx;
			font-weight: 600;
		}

		.vueDetail {
			font-size: 28rpx;
			color: #646566;
			display: flex;
			// justify-content: center;
			padding: 32rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		/deep/.u-tag {
			margin-left: 20rpx;

		}

		/deep/.u-textarea {
			background-color: #f3f3f3;
			margin-top: 80rpx;
		}

		/deep/.u-button {
			width: 40%;
			height: 80rpx;
		}

		.vueBtn {
			display: flex;
			margin-top: 80rpx;
		}
		.vueBtns {
			display: flex;
			margin-top:80rpx;
		}

		.vueBtn span {
			width: 320rpx;
			height: 96rpx;
			font-size: 24rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.vueBtn span:first-child {
			border-top: 1px solid #ebedf0;
		}

		.vueBtn span:last-child {
			color: #ee0a24;
			border-top: 1px solid #ebedf0;
			border-left: 1px solid #ebedf0;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
